<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">加价</button>
    <br>
    <h2>游戏列表</h2>
    <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeGames">修改第一个游戏的名字</button>
    <hr>
    <h2>{{ obj.a.b.c }}</h2>
    <button @click="changeC">test</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import {reactive} from 'vue'
    let car = reactive({brand:'奔驰' ,price:100})
    let games=reactive([
        {id:'001',name:'原神'},
        {id:'002',name:'王者'},
        {id:'003',name:'吃鸡'},
    ])
    let obj = reactive({
        a:{
            b:{
                c:666
            }
        }
    })
    function changePrice(){
        car.price += 10
    }
    function changeGames(){
        games[0].name = '跑跑'
    }
    function changeC(){
        obj.a.b.c = 777;
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px
    }
    li{
        font-size: 20px;
    }
</style>